<template>
  <div :data-id="data.id" class="file-card">
    <router-link :to="`/file/${data.id}`" class="file-card-box">
      <app-avatar v-if="!noUser" show-card v-bind="data" />
      <slot />
      <div class="card-content">
        <div v-if="!noUser" class="card-info">
          <span class="nickname" v-if="fileType">
            {{ fileType }}  
          </span>
        </div>
        <div class="card-title">{{ data.name }}</div>
      </div>
    </router-link>
    <card-info :data="data" />
    <app-icon
      class="file-card-more"
      icon="el-icon-arrow-down"
      size="12"
      color="#717171"
    />
  </div>
  
</template>

<script setup>
import { computed,ref } from 'vue'
import { getMarkdownData, getStrColor } from '/src/utils/process'
import CardInfo from './CardInfo.vue'

// [id,uid,avatar,nickname,content,gmtCreate,likes,pv,comments[,tags]]
const props = defineProps({
  data: { type: Object },
  noUser: { type: Boolean, default: false },
})

let fileType = ref(null);

console.log(props.data)
switch(props.data.type)
{
    case 1:
      fileType.value='文档'
        break;
    case 2:
      fileType.value='文档2'
        break;
    case 3:
      fileType.value='文档3'
        break;
    case 4:
      fileType.value='文档4'
        break;
    default:
      fileType.value='未知'
}



//const content = getMarkdownData(props.data.content)
</script>

<style lang="scss" scoped>
@import '/src/styles/variables';

.file-card {
  position: relative;
  height: 150px;
  width: 300px;
  padding: 12px 16px;
  margin-left: 12px;
  margin-bottom: 12px;
  background-color: #ffffff;
  border-radius: 3px;
  transition: all 0.15s;

  &:hover {
    box-shadow: $card-shadow;
  }

  .file-card-more {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    visibility: hidden;
  }

  &:hover > .file-card-more {
    visibility: visible;
  }
}

.file-card-box {
  position: flex;
  height: 110px;
  cursor: pointer;

  // 右侧首图
  .card-image {
    float: right;
    height: 90px;
    margin-top: 10px;
    margin-left: 6px;
  }

  // 卡片内容：个人信息+标题+预览正文
  .card-content {
    position: relative;
    margin-left: 46px;
    font-size: 14px;

    // 个人信息
    .card-info {
      position: relative;

      .nickname {
        margin-right: 4px;
      }
    }

    // 标题部分
    .card-title {
      padding-right: 4px;
      margin: 8px 0;
      overflow: hidden;
      font-size: 18px;
      font-weight: bolder;
      color: $title-text-color;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // 正文部分
    .file-content {
      display: -webkit-box;
      overflow: hidden;
      color: $deep-gray;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
